<template>
	<view class="image-box">
		<view>
			<view v-if="showData.imageList && showData.imageList.length > 0 && showData.imageList[0].url" class="image-view-box">
				<view
					v-if="showData.type === '1'"
					:style="{
						'margin-left': `${showData.styleMargin}rpx`,
						'margin-right': `${showData.styleMargin}rpx`,
						'padding-bottom': `${showData.stylePadding}rpx`,
					}"
				>
					<image
						v-for="(item, index) in showData.imageList"
						:key="index"
						style="display: block; width: 100%"
						:src="item.url"
						@click="toPage(item.linkUrl)"
					/>
				</view>
				<u-swiper
					v-else
					:height="showData.height"
					:style="{ 'margin-left': `${showData.styleMargin}rpx`, 'margin-right': `${showData.styleMargin}rpx` }"
					name="url"
					:list="showData.imageList"
				></u-swiper>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { toJumpUrl } from '@/utils/index';
defineProps({
	showData: {
		type: Object,
		default: () => {},
	},
});

const toPage = (jumpUrl: string) => {
	toJumpUrl(jumpUrl);
};
</script>

<style scoped lang="scss">
.image-box {
	.cursor {
		cursor: pointer;
		font-size: 12px;
		color: #fff;

		&.color {
			color: #2c3e50;
		}
	}

	img {
		width: 100%;
		user-select: none;
	}

	.image-view-box {
		// position: relative;
		overflow: hidden;

		&.ad-view-2,
		&.ad-view-3 {
			white-space: nowrap;
			display: -webkit-box;

			.image-view-item {
				width: 100%;
			}
		}

		&.ad-view-3 {
			.image-view-item {
				width: 40%;
			}
		}
	}

	.image-view-item {
		position: relative;
		height: 135px;
		overflow: hidden;
		font-size: 12px;
		background-color: #ebf8fd;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		color: #88c4dc;
		text-align: center;

		.image-title {
			line-height: 135px;
		}
	}
}
</style>
